<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert("sdd");
        let datas = [
            [1, 'a', 16],
            [2, 'b', 20],
            [3, 'c', 22],
            [4, 'd', 44],
            [5, 'e', 11],
            [6, 'f', 12],
            [7, 'g', 13]
        ];
        let cur_page = 0;
        let t = document.querySelector('tbody');
        let page_num = document.querySelector('#page_num');
        let row_num = 3;
        (() => jump_to(cur_page))();

        function pre() {
            if (cur_page > 0) {
                cur_page--;
                jump_to(cur_page);
            }
        }

        function next() {
            if (cur_page < (datas.length / row_num) - 1) {
                cur_page++;
                jump_to(cur_page);
            }
        }

        function jump_to(page) {
            t.innerHTML = '';
            for (let i = page * row_num; i < (page + 1) * row_num && i < datas.length; i++) {
                let row = t.insertRow();
                for (let item of datas[i]) {
                    row.insertCell().innerHTML = item;
                }
            }
            page_num.value = page + 1;
        }

        document.querySelector('#cur_page').innerText = `/${Math.ceil(datas.length / row_num)}`;
        document.querySelector('#pre').onclick = () => pre();
        document.querySelector('#next').onclick = () => next();
        document.querySelector('#jump').onclick = function() {
            if (page_num.value < (datas.length / row_num) + 1 && page_num.value - 1 !== cur_page && page_num.value > 0 && Number.isInteger(parseInt(page_num.value))) {
                cur_page = page_num.value - 1;
                jump_to(cur_page);
            }
        };

    </script>
</head>
<body>

<table border="" cellspacing="" cellpadding="" id="table">
    <thead>
    <tr>
        <td>No</td>
        <td>Name</td>
        <td>Age</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Nosdas</td>
        <td>Namsadae</td>
        <td>Agesda</td>
    </tr>
    <tr>
        <td>Nosda</td>
        <td>Name</td>
        <td>Agsdae</td>
    </tr>
    <tr>
        <td>No</td>
        <td>Nadsame</td>
        <td>Age</td>
    </tr>
    <tr>
        <td>No</td>
        <td>Name</td>
        <td>Asadasge</td>
    </tr><tr>
        <td>No</td>
        <td>Name</td>
        <td>Age</td>
    </tr><tr>
        <td>No</td>
        <td>Name</td>
        <td>Age</td>
    </tr>


    </tbody>
    <tfoot>
    <tr>
        <td colspan="3">
            <input type="button" name="pre-btn" id="pre" value="<" />
            <input type="text" name="page_num" id="page_num" value="" />
            <span id="cur_page"></span>
            <input type="button" name="jump" id="jump" value="跳转" />
            <input type="button" name="next-btn" id="next" value=">" />
        </td>
    </tr>
    </tfoot>
</table>


</body>
</html>